<template>
  <wd-search placeholder-left @search="gotoSearch" />
  <!-- 历史记录+删除icon -->
  <view
    style="
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      margin-right: 30rpx;
      margin-left: 30rpx;
    "
  >
    <text style="font-weight: 600">历史记录</text>
    <wd-icon name="delete" size="22px" />
  </view>
  <!-- 历史记录 -->
  <view class="historyBox">
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text1">人民医院</view>
    <view class="text1">人民医院</view>
    <view class="text1">人民医院</view>
  </view>
  <!-- 热门搜索 -->
  <view
    style="
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      margin-right: 30rpx;
      margin-left: 30rpx;
    "
  >
    <text style="font-weight: 600">热门搜索</text>
    <!-- <wd-icon name="delete" size="22px" /> -->
  </view>
  <!-- 热门搜索内容 -->
  <view class="historyBox">
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
    <view class="text">高血压</view>
  </view>
  <view />
</template>

<script lang="ts" setup>
const gotoSearch = () => {
  uni.navigateTo({ url: "/pages/search/index" });
};
</script>

<style lang="scss" scoped>
.historyBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 690rpx;
  padding-top: 20rpx;
  //   background-color: aqua;
  margin: 0 auto;
  .text {
    width: 140rpx;
    height: 50rpx;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    color: #697179;
    text-align: center;
    background-color: #f3fcfb;
  }
  .text1 {
    width: 150rpx;
    height: 50rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    color: #697179;
    text-align: center;
    background-color: #f3fcfb;
    // margin-top: 20rpx;
  }
}
</style>
